<template>
  <div>
    <div v-for="arr in tableData" :key="arr.id" class="layout-new">
      <img class="layout-new-img" :src="arr.picture" />
      <h3>{{arr.title}}</h3>
      <p class="layout-new-p1">{{arr.content}}</p>
      <p class="layout-new-p2">{{arr.createTime}}</p>
    </div>
    <el-pagination
        @current-change="changePage"
        :current-page="currentPage"
        :page-size="pageSize"
        layout="total, prev, pager, next"
        :total="total">
    </el-pagination>
  </div>
</template>

<script>
export default {
  data() {
    return {
      /*新闻列表*/
      tableData: [], // 新闻列表数据
      total: 0, // 总页数
      currentPage: 1, // 当前页码
      articleType: 3, // 文章类型
      pageSize: 10, // 每页显示的数量，初始值为10
    };
  },

  methods: {
    /*新闻列表*/
    changePage(page){
      this.currentPage = page;
      this.loadList();
    },

    loadList(){
      let url = `http://localhost:8080/articles?pageNum=${this.currentPage}&pageSize=${this.pageSize}&articleType=${this.articleType}`;
      this.axios.get(url).then((response) => {
        let jsonResult = response.data;
        if (jsonResult.code == 200) {
          this.tableData = jsonResult.rows;
          this.total = jsonResult.total;
        } else {
          this.$alert(jsonResult.message, '错误', {
            confirmButtonText: '确定',
            callback: action => {}
          });
        }
      });
    },
  },

  created(){
    this.loadList();
  },
}
</script>

<style scoped>
.layout-new {
  padding: 20px 40px;
  margin-bottom: 40px;
}
.layout-new > .layout-new-img {
  float: left;
  margin-right: 25px;
  width: 260px;
  height: 160px;
}
.layout-new > h3, .layout-new-p1, .layout-new-p2 {
  text-align: left;
  margin-top: 15px;
  margin-left: 20px;
}
.layout-new > h3{
  color: #333;
  font-size: 17px;
}
.layout-new > .layout-new-p1{
  color: #666;
  font-size: 16px;
}
.layout-new > .layout-new-p2{
  color: #999;
  font-size: 14px;
}
</style>